<template>
    <div class="goods-list">
      <!--  <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/'+item.id" tag="div">
           <img :src="item.img_url" alt="">
           <h1 class="title">{{item.title}}</h1>
           <div class="info">
               <p class="price">
                   <span class="now">¥{{item.sell_price}}</span>
                   <span class="old">¥{{item.market_price}}</span>
               </p>
               <p class="sell">
                   <span>热卖中</span>
                   <span>剩{{item.stock_quantity}}件</span>
               </p>
           </div>
       </router-link> -->
       <!-- 在页面中，有2种跳转方式：
       方式1，使用a等标签的形式，叫做标签跳转
       方式2:  使用window.location.href的形式，叫做编程式导航。（在router.vue中的编程式导航中有方法，此处不演示）。-->
       <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/'+item.id" tag="div">
           <img :src="item.img_url" alt="">
           <h1 class="title">{{item.title}}</h1>
           <div class="info">
               <p class="price">
                   <span class="now">¥{{item.sell_price}}</span>
                   <span class="old">¥{{item.market_price}}</span>
               </p>
               <p class="sell">
                   <span>热卖中</span>
                   <span>剩{{item.stock_quantity}}件</span>
               </p>
           </div>
       </router-link>
       <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
      
       
    </div>
</template>
<script>
export default {
    //data是往自己的组件内部挂载一些私有数据的
    data(){
        return{
            pageindex:1,//写活页数，默认是第一页
            goodslist:[]//所有商品的容器
        };
    },
    created(){
        this.getGoodsList();
    },
    methods:{
     //获取商品列表
         getGoodsList(){
             this.$http.get("http://localhost:3000/src/db/goodslist.json?pageindex="+this.pageindex).then(result=>{
                console.log(result)
                this.goodslist=this.goodslist.concat(result.body)
                }) 
    },
    getMore(){
        this.pageindex++;
        this.getGoodsList();
    }
    }
}
</script>
<style lang="scss" scoped>
 .goods-list{
     display:flex;
     flex-wrap: wrap;
     padding: 8px;//1,给list大盒子留出padding左右的空白，
     justify-content: space-between;//2，第二步，贴端对齐，留出中间的空白，
     .goods-item{
         width: 49%;
         border: 1px solid #ccc;
         box-shadow: 0 0 8px #ccc;
         margin: 4px 0;//3，第三步，上下左右，上下空白4px
         padding: 2px;
         display: flex;//
         flex-direction: column;//
         justify-content: space-between;//这三步实现流式布局的纵向两端对齐。解决当标题字体不一，底部有空白的情况
         min-height: 293px;//默认最小高度，解决当网速不好时，盒子挤到一起
         img{
             width: 100%;
             
         }
         .title{
             font-size: 14px;
         }
         .info{
             background-color: #eee;
             p{
             margin: 0;//盒子没有撑满盒子，检查元素得知p标签有margin
            padding: 5px;//内部撑开
             }
             .price{
                 .now{
                     color: red;
                     font-weight: bold;
                     font-size: 16px;
                 }
                 .old{
                     text-decoration: line-through;
                     font-size: 12px;
                     margin-left: 10px;
                 }
             }
             .sell{
                 display: flex;//两端对齐
                 justify-content: space-between;
                 font-size: 12px;
             }
         }
     }
 }
</style>
